@charset "UTF-8";
/* 通用选择器 */
/* * {
    border: 1px dotted red;
} */

/* 元素选择器 */
/* p{
    color: red;
} */

/* ID选择器 */
/* #abc{
    color: peru;
} */

/* 类选择器 */
/* .abc{
    color: blue;
}

p.abc{
    border: 1px dotted purple;
}

.def{
    font-size: 30px;
} */

/* 属性选择器 */
/* [href] {
    color: bisque;
}

[type="password"]{
    border: 1px solid darkblue;
}

[href^="http"]{
    color: brown;
}

[href$="cn"]{
    color: darkgreen;
}

[href*="baidu"]{
    color: burlywood;
}

[class~="def"]{
    color: blueviolet;
}

[lang|="en"]{
    color: aquamarine;
} */

/* 复合选择器 */

/* p,span{
    color: aquamarine;
}

ul li{
    color: blue;
}

ul > li{
    color: brown;
}

p + b{
    color: blueviolet;
}

p ~ b{
    color:antiquewhite;
} */

/* 伪元素选择器 */
/* 块级首行 */
/* ::first-line{
    color:burlywood;
}

::first-letter{
    color: hotpink;
}

p::before{
    content: "据报道："
}

p::after{
    content: "引用于网络。"
} */

/* 结构性伪类选择器 */
/* :root{
    border: 1px dashed red;
}

ul > li:first-child{
    color: blue;
}

ul>li:last-child{
    color: yellowgreen;
}

ul>li>span:only-child{
    color: red;
}

ul>li>p:only-of-type{
    color: yellow;
} */

/* ul>li:nth-child(2){
    color: aquamarine;
}

ul>li:nth-last-child(2){
    color: blue;
}

ul>li:nth-of-type(2){
    color: red;
}

ul>li:nth-last-of-type(2){
    color: yellow;
} */

/* UI 伪类选择器 */
/* :enabled{
    border: 1px dashed red;
}

:disabled{
    border: 1px dashed darkmagenta;
}

:checked{
    display: none;
}

:default{
    display: none;
}

input:valid{
    border: 1px dashed green;
}

input:invalid{
    border: 1px dashed red;
}

input:required{
    border: 1px dashed red;
}

input:optional{
    border: 1px dashed green;
} */

/* 动态伪类选择器 */
/* a:link{
    color: blue;
}

a:hover{
    color: yellow;
}

a:visited{
    color: black;
}

a:active{
    color: red;
}

input:focus{
    border: 5px double red;
} */

/* 其它伪类选择器 */
/* a:not([href*="baidu"]){
    color: aqua;
}

p:empty{
    display: none;
}

div:target{
    color: red;
}

::selection{
    color: rebeccapurple;
} */
/* 颜色和尺寸 */
/* 文本的大小 */
/* 文本样式 */
/* 文本控制 */
@font-face{
    font-family: 'long';
    src: url('今昔豪龙.otf');
}

p{
    /* color: red;
    color: #ff0000;
    color: #f00; 
    color: rgb(255,0,0);
    color: rgba(255,0,0,0.5); 
    color: hsl(128, 100%, 30%);
    color: hsla(128, 100%, 30%,0.8);*/

    /* margin: 0;
    padding: 0;
    background-color: yellow;
    font-size: 20px;
    height: 3em; */

    /* margin: 0;
    padding: 0;
    background-color: yellow;
    font-size: 20px;
    height: 40px; */

    /* margin: 0;
    padding: 0;
    background-color: yellow;
    font-size: 20px;
    width: 50%; */

    /* font-size: 50px; */
    /* font-size: xx-large; */
    /* font-size: xx-small; */
    /* font-size: smaller;  */ /* 比较大小 */
    /* font-variant: small-caps; */
    /* font-style: italic; */
    /* font-style: oblique; */
    /* font-weight: lighter;
    font-family: 'long'; */
  /*   text-decoration: underline; */
    /* text-decoration: overline; */
   /*  text-decoration: line-through; */
    /* text-align: center; */
    /* white-space: normal; */
    /* white-space: nowrap; */
    /* white-space: pre; */
    /* white-space: pre-line; */
    /* white-space: pre-wrap;
    pre 代表空白符保留  wrap 表示换行 */
   /*  word-wrap: break-word; */
    /* text-indent: 20px; */
}

/* a{
    text-decoration: none;
} */

/* body{
    font-size: 20px;
}

span{
    text-transform: lowercase;
    text-shadow: 3px 3px 5px yellow;
}
 */

 /* css盒模型 */
div{
    /* background-color: gray; */
    /* width: 500px;
    height: 500px; */
    /* width: 50px;
    height: 50px;
    min-width: 200px;
    min-height: 200px; */

    /* width: 5000px;
    height: 5000px;
    max-width: 200px;
    max-height: 200px; */

    /* width:auto;
    height: auto; */
    
}

/* #a{
    background: silver;
    width: 500px;
    height: 500px;
}
#b{
    background: yellow;
    width: 70%;
    height: 70%;
} */

div{
    /* width: 200px;
    height: 200px;
    padding: 10px; 
    padding: 10px 20px;
    padding: 10px 20px 30px;
    padding: 10px 20px 40px 50px;
    margin: 20px; */
    /* overflow: visible; */
    /* overflow: hidden; */
    /* overflow: auto; */
    /* overflow: scroll; */

    /* width: 500px;
    height: 500px;
    background:green; */
    /* visibility: hidden; */
    /* visibility: collapse;   无效 */
}

/* table{
    border: 1px double black;
} */

table tr:first-child{
    /* visibility: hidden; */
    /* visibility: collapse; */
}

div{
    /* height: 200px;
    width: 200px;
    background: salmon; */
    /* display: inline; */
    /* display: inline-block; */
}

span{
    /* height: 200px;
    width: 200px;
    background:seagreen; */
    /* display: block; */
    /* display: inline-block; */
}

img{
    /* height: 200px;
    width: 200px; */
    /* display: block; */
    /* display: inline; */
} 

/* div{
    height: 200px;
    width: 200px;
}

#a{
    background: red;
    float: left;
}

#b{
    background: blue;
    float: left;
}

#c{
    background: yellowgreen;
    clear: both;
}
 */

 /* 边框和背景 */
 div{
     /* height: 500px;
     width: 500px; */
     /* background: red; */
     /* border-style: dotted;
     border-width: 20px;
     border-color: blueviolet;
     border-radius: 20px 30px 40px 50px; */

     /* background-image: url(./1.jpg); */
     /* background-repeat: no-repeat; */
     /* background-size: auto; */
     /* background-size: contain; */
     /* background-size: cover; */
     /* padding: 30px; */
     /* background-origin:content-box;  */
     /* background-origin:padding-box;  */
     /* background-origin:border-box;  */
     /* background-clip: border-box; */
     /* background-clip: padding-box; */
     /* background-clip: content-box; */
     /* padding: 30px;
     background: silver url(./1.jpg) no-repeat scroll left bottom / 100% border-box content-box; */
 }

 body{
    /* background-image: url(./1.jpg); */
    /* background-attachment: scroll; */
    /* background-attachment: fixed; */
 }

 table{
     border: 1px solid red;
     width: 500px;
     height: 300px;
     /* border-collapse: collapse; */
     border-collapse: separate;
     border-spacing: 15px;
     caption-side: bottom;
     /* empty-cells: show; */
     empty-cells: hide;
     /* table-layout: auto; */
     table-layout: fixed;
 }

 ul{
     /* list-style-type: circle; */
     width: 300px;
     /* list-style-position: inside; */
     /* list-style-position: outside;
     list-style-image: url(./Go.ico); */
    list-style: lower-alpha inside url(./Go.ico);
 }

 table tr td{
     /* vertical-align: bottom; */
     /* vertical-align: top; */
     /* vertical-align: middle; */
 }

 b{
     /* vertical-align: sub; */
     /* vertical-align: super; */
 }
/* 
 #testv{
     height: 500px;
     width: 500px;
     background: greenyellow;
     vertical-align: middle;
 }

 #testv2{
    height: 500px;
    width: 500px;
    background:darkkhaki;
    text-align: center;
}

#testv2 span{
    vertical-align: -400%;
}

em{
    vertical-align: 400%;
} */

div{
    /* height: 200px;
    width: 200px;
    background-color: brown; */
    /* color: blue;
    background-color: brown;
    opacity: 0.1; */
    /* box-shadow: 10px 10px 5px 2px gray inset;
    outline: 5px dotted red;
    cursor: text; */
}

<<<<<<< HEAD
/* 文本阴影 text-shadow */
#t2{
    /* text-shadow: 5px 1px 1px rebeccapurple,
                5px 5px 1px red;
    font: 5em sans-serif; */
}
/* 文本裁剪 text-overflow*/
#t2{
    /* height: 300px;
    width: 300px;
    border: 1px dashed red; */
    /* text-overflow: clip; */ /* 这是默认值 */
    /* white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; */
    /* 这三个属性要一起用 */
}
/* 文本描边 */ /*  -webkit-text-stroke  */
#t3{
    height: 300px;
    width: 300px;
    -webkit-text-stroke: 3px red;
}
/* 文本填充 */
#t4{
    /* font-size: 150px;
    background: -webkit-linear-gradient(bottom,#eee,#aaa 50%,#333 51%,#000); */
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}

/* 线性渐变 */
#t5{
    /* height: 500px;
    width: 500px; */
    /* background-image: linear-gradient(to top,red,blue); */
    /* background-image: linear-gradient(to top right,red,blue); */
    /* background-image: linear-gradient(45deg ,red 0%,blue 20%); */
    /* background-color: red;
    background-image: linear-gradient(to top right,rgba(0,0,0,0.6),rgba(0,0,0,0)); */
    /* background-image: repeating-linear-gradient(to top,red 100px,yellow 200px); */
}
/* 径向渐变 */
#t6{
    height: 200px;
    width: 500px;
    /* background-image: radial-gradient(circle,orange,green); */
    /* background-image: radial-gradient(circle at top,orange,green); */
    /* background-image: radial-gradient(circle closest-side,orange,green); */
    /* background-image: radial-gradient(circle farthest-side,orange,green); */
    /* background-image: radial-gradient(circle farthest-corner,orange,green); */
    /* background-image: radial-gradient(circle 30px,orange,green); */
    background-image: repeating-radial-gradient(circle 30px,orange,green);


div{
    height: 200px;
    width: 200px;
    animation:    myfirst 2s       ease-in-out    0s        3          alternate forwards;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    background: black;

}

@keyframes myfirst{
    from{background: blue; margin-left: 0px;}
    to {background: chocolate; margin-left: 200px;}
}